<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 隐士网格就是我实际定义了两行两列  但是实际有超过4个元素 那么剩下的元素就由隐士网格来决定 隐士网格只能自行决定高度 宽度必须和显示网格一样 */
      .wrapper {
        margin: 50px;
        display: grid;
        grid-template-columns: 200px 100px;
        /*  只设置了两行，但实际的数量会超出两行，超出的行高会以 grid-auto-rows 算 */
        grid-template-rows: 100px 100px;
        grid-gap: 10px 20px;
        grid-auto-rows: 50px;
        /* grid-auto-columns: 100px; */
      }

      .one {
        background: #19caad;
      }
      .two {
        background: #8cc7b5;
      }
      .three {
        background: #d1ba74;
      }
      .four {
        background: #bee7e9;
      }
      .five {
        background: #e6ceac;
      }
      .six {
        background: #ecad9e;
      }
      .seven {
        background: #beedc7;
      }
      .eight {
        background: #f4606c;
      }
      .nine {
        background: #a0eee1;
      }
      .item {
        text-align: center;
        font-size: 200%;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h1>grid-gap</h1>
    <div class="wrapper">
      <div class="one item">One</div>
      <div class="two item">Two</div>
      <div class="three item">Three</div>
      <div class="four item">Four</div>
      <div class="five item">Five</div>
      <div class="six item">Six</div>
      <div class="seven item">Seven</div>
      <div class="eight item">eight</div>
      <div class="nine item">Nine</div>
    </div>
  </body>
</html>
